@import "../common/common.scss";
body{
  background: #F5F5F5;
  .container{
    height: px2rem(1206px);
    overflow: auto;
    &::-webkit-scrollbar {
    width: 0px;
    }
    .header{
      background:url(../../asset/images/header.png) no-repeat;
      background-size: 100%;
      height: px2rem(753px);
      .top{
        height: px2rem(80px);
        text-align: center;
        display: flex;
        align-items: center;
        color: #3E3E3E;
        font-size: px2rem(30px);
        font-weight: lighter;
        justify-content: center;
        .img1{
          width: px2rem(41px);
          height: px2rem(41px);
          margin-right: px2rem(20px);
        }
        .img2{
          width: px2rem(35px);
          height: px2rem(30px);
          margin-left: px2rem(20px);
        }
      }
      .con{
        width: px2rem(702px);
        height: px2rem(624px);
        background-color: #fff;
        opacity: 0.92;
        margin:0 auto;
        border-radius: px2rem(10px);
        position: relative;
        .item1{
          position: absolute;
          width: px2rem(286px);
          height: px2rem(346px);
          left:px2rem(36px);
          top: px2rem(66px);
          .pic{
            width: px2rem(286px);
            height: px2rem(286px);
            background:url(../../asset/images/pic1.png) no-repeat center;
            background-size:104%;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            .hos{
              width: 100%;
              height:px2rem(52px);
              background: rgba(181, 181, 181, 0.6);
              color: #fff;
              font-size: px2rem(36px);
              line-height: px2rem(52px);
              text-align: center;
            }
          }
          .dis{
            color: #424242;
            font-size: px2rem(30px);
            text-align: center;
            margin-top:px2rem(10px);
          }
        }
        .item2{
          position: absolute;
          width: px2rem(160px);
          height: px2rem(201px);
          top:px2rem(77px);
          right: px2rem(107px);
          .pic{
            width: px2rem(160px);
            height: px2rem(160px);
            background:url(../../asset/images/pic2.png) no-repeat center;
            background-size: 100%;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            .hos{
              width: 100%;
              height:px2rem(30px);
              line-height: px2rem(30px);
              background: rgba(181, 181, 181, 0.6);
              color: #fff;
              font-size: px2rem(22px);
              font-weight: 200;
              text-align: center;
            }
          }
          .dis{
            color: #424242;
            font-size: px2rem(22px);
            text-align: center;
            margin-top:px2rem(6px);
          }
        }
        .item3{
          position: absolute;
          width: px2rem(230px);
          height: px2rem(276px);
          bottom: px2rem(22px);
          right: px2rem(122px);
          .pic{
            width: px2rem(230px);
            height: px2rem(230px);
            background:url(../../asset/images/pic3.png) no-repeat center;
            background-size: 106%;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            .hos{
              width: 100%;
              height:px2rem(35px);
              line-height: px2rem(35px);
              background: rgba(181, 181, 181, 0.6);
              color: #fff;
              font-size: px2rem(28px);
              text-align: center;
            }
          }
          .dis{
            color: #424242;
            font-size: px2rem(28px);
            text-align: center;
            margin-top:px2rem(10px);
          }
        }
        .item4{
          position: absolute;
          width: px2rem(263px);
          height: px2rem(164px);
          bottom: px2rem(30px);
          text-align: center;
          left:px2rem(10px);
          .pic{
            width: px2rem(119px);
            height: px2rem(77px);
            margin: 0 auto;
            background:url(../../asset/images/pic4.png) no-repeat center;
            background-size: 100%;
            margin-top: px2rem(30px);
          }
          .dis{
            color: #12473F;
            font-size: px2rem(34px);
            margin-top: px2rem(10px);
          }
        }
      }
    }
    .activity{
      height: auto;
      overflow: hidden;
      background: #fff;
      .title{
        width: 100%;
        height: px2rem(240px);
        background: #fff url(../../asset/images/activity.png) no-repeat center;
        background-size: px2rem(564px) px2rem(103px);
      }
      .con{
        width: px2rem(750px);
        overflow-x: auto;
        .col1{
          width: px2rem(415px);
          .pic{
            width: px2rem(415px);
            height: px2rem(236px);
            background: url(../../asset/images/col1.png) no-repeat center;
          }
        }
        .col1{
          width: px2rem(332px);
          .pic{
            width: px2rem(415px);
            height: px2rem(236px);
            background: url(../../asset/images/col2.png) no-repeat center;
          }
        }
      }
    }



  }
}
